<template>
  <div class="vue-root">
    <aside class="filter">
      <div class="filter-header">
        <a class="filter-nav" :class="{active:tabcategoryName}" @click="switchTab(0)">
          <span>{{title}}</span> 
          <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path></svg>
        </a>
        <a class="filter-nav" :class="{active:tabSort}" @click="switchTab(1)">
          <span >排序</span> 
          <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path>
          </svg>
        </a>
        <a class="filter-nav" :class="{active:tabFilter}" @click="switchTab(2)">
          <span >筛选</span> 
          <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path>
          </svg>
        </a>
      </div>
    </aside>
    <section class="filter-extend filter-category" :class="{open:tabcategoryName}">
      <div class="aui-row" style="background: rgb(242, 242, 242);">
        <div class="aui-col-xs-6 aui-border-r" id="left" style="background:#f2f2f2;">
          <ul class="aui-list aui-list-noborder aui-margin-b-0" id="leftTab" style="background:#f2f2f2;" >
               <li class="aui-list-item aui-list-item-middle" v-for="(item,index) in categorys" @click="getRightCategoryData(item.id,index)" :class="{active:item.checked}">
                  <div class="aui-list-item-inner aui-list-item-arrow" >
                      <div class="aui-list-item-title">{{item.name}}</div>
                      <div class="aui-list-item-right">
                          <div class="aui-badge" style="position:relative;right: 1rem;top:0; left:0;background:#ccc;font-size:0.4rem;">{{item.count}}</div>
                      </div>
              </li>   
          </ul>
        </div>
        <div class="aui-col-xs-6" id="right">
        <ul class="aui-list aui-list-noborder aui-margin-b-0" >
            
          <li class="aui-list-item aui-list-item-middle" v-for="(item,index) in rightcategory">
                  <div class="aui-list-item-inner">
                      
                      <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">{{item.name}}</div>
                      <div class="aui-badge" style="position:relative;right: 1rem;top:0; left:0;background:#fff;font-size:0.4rem;color:#666">{{item.count}}</div>
              </li>
              
          </ul>
        </div>
      </div>
    </section>
    <section class="filter-extend filter-category" :class="{open:tabSort}">
       <ul class="aui-list aui-list-noborder aui-margin-b-0">
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>智能排序
                  </div>
              </div>
          </li>
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>距离最近
                  </div>
              </div>
          </li>
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>销量最高
                  </div>
              </div>
          </li>
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>起送价最低
                  </div>
              </div>
          </li>
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>配送速度最快
                  </div>
              </div>
          </li>
          <li data-id="1" class="aui-list-item">
              <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="font-size:0.6rem;color:#666;">
                  <i class="aui-iconfont aui-icon-left" style="font-size:0.6rem;padding-right:0.5rem;"></i>评分最高
                  </div>
              </div>
          </li>     
        </ul>
    </section>
    <section class="filter-extend filter-category" :class="{open:tabFilter}">
      <div class="attr">
        <div class="attr-title">商家属性(可多选)</div>
        <section class="aui-grid aui-margin-b-15">
            <div class="aui-row">
                <div class="aui-col-xs-4" style="padding:0.25rem 0;" v-for="item in attrs">
                    <div class="aui-btn">
                      <i class="simple" :style="'color:'+item.color+';'">{{item.simple}}</i>{{item.name}}
                    </div>
                </div>
                
            </div>
        </section>
      </div>
      <div class="btn-submit">
        <div class="aui-btn aui-btn-block aui-btn-sm">
          清空
        </div>
        <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm">
          确定
        </div>
      </div>
    </section>
    
    <section class="filter-modal" :class="{open:modal}" v-tap.prevent="{ methods : hideAll }"></section>
  </div>
</template>
<script>
import Config from 'components/config';
export default {
  name: 'filter',
  props: {
    title:{
      type:String
    }
  },
  data () {
    return {
      baseUrl:'',
      tabcategoryName:false,
      tabSort:false,
      tabFilter:false,
      modal:false,
      parentid:'',
      categorys:[],
      rightparentid:'',
      rightcategory:[],
      activeindex:0,
      attrs:[]
    }
  },
  created(){
    this.baseUrl=Config.data().url;
    console.log("filter->parentid:"+this.$route.params.id);
    this.parentid=this.$route.params.id;
    this.getCategoryData();

  },
  mounted() {
    
  },
  methods:{
    switchTab:function(idx){
      switch(idx){
        case 0:
          this.tabcategoryName=!this.tabcategoryName;
          this.tabSort=false;
          this.tabFilter=false;
          this.modal=this.tabcategoryName;
        break;
        case 1:
          this.tabSort=!this.tabSort;
          this.tabcategoryName=false;
          this.tabFilter=false;
          this.modal=this.tabSort;
        break;
        case 2:
          this.tabFilter=!this.tabFilter;
          this.tabSort=false;
          this.tabcategoryName=false;
          this.modal=this.tabFilter;
        break;
      } 
    },
    hideAll:function(){
      this.tabSort=false;
      this.tabcategoryName=false;
      this.tabFilter=false;
      this.modal=false;
    },
    getCategoryData:function(){
        this.$http.get(Config.data().apiUrl+"shop.php?action=category_by_parent&parentid="+this.parentid).then(function(res){
              this.categorys=res.body;
              for(var i in res.body){
                if(i==0){
                  this.categorys[i].checked=true;
                }else{
                    this.categorys[i].checked=false;
                }
                
              }
              if(this.categorys.length>0){
                this.rightparentid=res.body[0].id;
                this.getRightCategoryData(this.rightparentid,0);
              }
              this.getAttr();
            },function(res){  
              
          });
    },
    getRightCategoryData:function(id,idx){
       for(var i in this.categorys){
          if(i==idx){
            this.categorys[i].checked=true;
          }else{
              this.categorys[i].checked=false;
          }
        }
       this.$http.get(Config.data().apiUrl+"shop.php?action=category_by_parent&parentid="+id).then(function(res){
              this.rightcategory=res.body;
            },function(res){  
              
          });
       var _innerHeight= window.innerHeight-300;
       document.getElementById("left").style.height = _innerHeight+"px";
       document.getElementById("right").style.height = _innerHeight+"px";
    },
    getAttr:function(){
      var url=Config.data().apiUrl+"shop.php?action=attr";
      this.$http.get(url).then(function(res){
          this.attrs=res.body;
      },function(res){});
    }
  }
}
</script>
<style type="text/css" scoped>
    #left,
    #right {
        background-color: #ffffff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #right {
        background-color: transparent;
    }
    .aui-list-item.aui-active {
        background-color: #b6dffd;
        color: #fff;
    }
    .filter-extend{
    left: 0;
    right: 0;
    
    position: absolute;
    max-height: 0;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    visibility: hidden;
    overflow: auto;
    opacity: 0;
    z-index: 3
  }

  .filter-extend.filter-more{
    padding-bottom: 1.466667rem
  }

  .filter-extend.open{
    opacity: 1;
    visibility: visible;
    max-height: 1000%
  }

  .filter-category{
    
  }
  .filter-modal{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
  }

  .filter-modal.open{
    opacity: 1;
    visibility: visible
  }
  #left .aui-list .aui-list-item-title{
    font-size: 0.6rem;
    color: #666;
  }
  #left .aui-list .aui-list-item{
    padding-left: 1.6rem;
  }
  #right{
    border-left: 1px solid #f0f0f0
  }
  .active{
    background: #fff;
  }
  .attr{
    padding: 0 0.7rem;
  }
  .attr-title{
    padding: 0.3rem 0.5rem;
    font-size: 0.6rem;
    color: #666;
  }
  .attr .simple{
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    border-width: 1px;
    margin: 0 .4rem 0 .2rem;
    border-style: solid;
    width: 0.8rem;
    line-height: .7rem;
    text-align: center;
    border-radius: .08rem;
    font-size: .5rem;
    box-sizing: border-box;
  }
  .attr .aui-btn{
    border: 1px solid #ddd;
    background: #fff;
    height: 1.6rem;
    line-height: 1.6rem;
    color:#666;
    padding: 0 0.4rem;
    min-width: 5rem;
  }
  .btn-submit{
    display: flex;
    padding: 0.1rem 0.5rem 0.5rem 0.5rem;
  }
  .btn-submit div{
    flex: 1;
    -webkit-flex:1;
  }
  .btn-submit div:first-child{
      background-color: #fff;
      border: 1px solid #ddd;
      margin-right: .266667rem;
      color: #333;
  }
</style>